<template>
  <div v-if="items" class="Palying" id="play" :style="{backgroundColor: TenColorStyle.backgroundColor}">
    <div class="head" v-if="head">
      <Hread :text="'立即加入阅读计划，开始英文阅读之旅'" :Styles="TenColorStyle"></Hread>
    </div>
    <div class="text-title" :style="{color:TenColorStyle.color}">
      {{items.chapter_name}}
    </div>
    <div class="lyrics" ref="lrcBox" @touchstart="PageStart" @touchmove="PageMove" @touchend="PageEnd">
      <!--v-if="a.time!==''"-->
      <div v-for=" (a,i) in Chapter" v-if="a.time!==''">
        <Lyrics :text="a.text" :Styles="TenColorStyle" ref="Lyrics" :option="TenFontSizi" :icon="i === curLrcIndex" :index="i"
                :obj="a" @WordShow="WordShow"
                @Click="Click"></Lyrics>
      </div>
      <div class="btns">
        <p v-if="!isBtns"><i class="iconfont icon-daojishi"></i>倒计时结束后，即可进入答题</p>
        <Button :btStyle="btStyle" :text="btntext" :dis="dis" @Click="goAnswer(isBtns)"></Button>
      </div>
    </div>
    <div class="" v-show="PopupModify">
      <modify @hide="Modifyhide" @Color="OptiveColor" @PopupShow="PopupShow" :Styless="TenColorStyle"
              @TenFontSizi="OptiveTenFontSizi"
              :TenFontSizi="TenFontSizi" @></modify>
    </div>
    <transition
      name="fade"
      enter-active-class="animated bounceInUp"
      leave-active-class="animated bounceOutDown">
      <div class="" v-show="PopupVocabulary">
        <Vocabulary :Vocabulary="Vocabulary" @hide="Vocabularyhide" :Styles="TenColorStyle"></Vocabulary>
      </div>
    </transition>
    <transition
      name="fade"
      enter-active-class="animated bounceInUp"
      leave-active-class="animated bounceOutDown">
      <div class="" v-show="PopupHandout">
        <Handout :Handout="items.chapter_handout_text" @hide="Handouthide" :Styles="TenColorStyle"></Handout>
      </div>
    </transition>
    <div class="" v-if="PopupSpeed">
      <Speed @hide="Speedhide" @Speed="Speed" :speeds="$refs.PalyFooter.speed" :Styles="TenColorStyle"></Speed>
    </div>
    <transition
      name="fade"
      enter-active-class="animated slideInUp"
      leave-active-class="animated fadeOutDownBig">
      <div class="foot" v-show="isfooer">
        <PalyFooter v-show="isfooer" @VocabularyShow="VocabularyShow" @HandoutShow="HandoutShow" @SpeedShow="SpeedShow"
                    @lrBox="lrBox" @Modifyshow="Modifyshow" :Styles="TenColorStyle"
                    ref="PalyFooter" :chapter_url="items.chapter_voice_url"></PalyFooter>
      </div>
    </transition>
    <div class="Popup" v-if="Popup">
      <Popup @hide="Popuphide"></Popup>
    </div>
    <div class="Words" v-if="PopupWord">
      <Word :Styles="TenColorStyle" :icon="WordItems.usa_voice_url!=='-1'" :item="WordItems" @hide="Wordhide"></Word>
    </div>
  </div>
</template>

<script>
  import Lyrics from './components/Lyrics/index'
  import Hread from './components/Head/index'
  import PalyFooter from './components/Footer/index'
  import Vocabulary from './components/Vocabulary/index'
  import Handout from './components/Handout/index'
  import Speed from './components/Speed/index'
  import modify from './components/modify/index'
  import Popup from './components/Popup/index'
  import Button from './components/Button/Index'
  import Word from './components/Word/Index'
  import $ from 'jquery'

  export default {
    name: "index",
    data: function () {
      var TenFontSizi = localStorage.getItem('TenFontSizi') ? JSON.parse(localStorage.getItem('TenFontSizi')) : {
        fontSize: 18,
        fontSizeval: 25
      }
      var TenColorStyle = localStorage.getItem('TenColorStyle') ? JSON.parse(localStorage.getItem('TenColorStyle')) : {
        mode: 1,
      }
      return {
        TenFontSizi: TenFontSizi,
        TenColorStyle: TenColorStyle,
        curLrcIndex: 0,
        PopupVocabulary: false,
        PopupHandout: false,
        PopupSpeed: false,
        PopupModify: false,
        PopupWord: false,
        WordItems: {},
        Popup: false,
        isRecord: true,
        btStyle: {
          width: '80%',
          height: '4rem',
          borderRadius: '5rem',
          color: '#333',
          backgroundColor: '#f2f2f2',
          // boxShadow: TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
        },
        btntext: '立即答题(05:00)',
        dis: false,
        translateY: 0,
        Time: 5,
        bgcolor: {
          Y: -1,
          X: -1,
          Color: '#ffd000'
        },
        isBtns: false,
        isTouch: true,
        isfooer: true,
        isplay: false,
        Timeout: null
      }
    },
    props: ['items', 'Vocabulary', 'head'],
    computed: {
      Chapter: {
        get: function () {
          if(this.items){
            // 内容
            this.items.chapter_text = this.$Mate.qingReadTextRetuen(this.items.chapter_text)
            this.items.chapter_handout_text = this.$Mate.qingReadTextRetuen(this.items.chapter_handout_text)
            this.items.chapter_text = this.$Mate.fetch(this.items.chapter_text)
            return this.items.chapter_text
          }

        },
        set: function (v) {
          this.obj.opacity = v
        }
      }
    },
    mounted: function () {
      if(!this.$Mate.getCookie('vip'+this.items.chapter_id)){
        this.$Mate.setCookie('vip'+this.items.chapter_id,300,24)
      }
      this.SetTime(this.$Mate.getCookie('vip'+this.items.chapter_id))
      // this.SetTime(300)
    },
    methods: {
      VocabularyShow: function () {
        this.isfooer = false
        this.isplay = this.$refs.PalyFooter.ispay
        if (this.$refs.PalyFooter.ispay) {
          this.$refs.PalyFooter.isPlay()
        }
        this.PopupVocabulary = true
      },
      Vocabularyhide: function () {
        this.isfooer = true
        if (this.isplay) {
          this.$refs.PalyFooter.isPlay()
        }
        this.PopupVocabulary = false
      },
      WordShow: function (obj) {
        this.isfooer = false
        this.isplay = this.$refs.PalyFooter.ispay
        if (this.$refs.PalyFooter.ispay) {
          this.$refs.PalyFooter.isPlay()
        }
        if (this.bgcolor.Y !== -1) {
          this.$refs.Lyrics[this.bgcolor.Y - 1].$refs.Lyric[this.bgcolor.X].style.backgroundColor = '';
        }
        // this.$refs.lrcBox.childNodes[])
        this.bgcolor.Y = obj.Y
        this.bgcolor.X = obj.X
        this.bgcolor.color = obj.color
        this.$refs.Lyrics[this.bgcolor.Y - 1].$refs.Lyric[this.bgcolor.X].style.backgroundColor = '#FF8800';
        this.WordItems = obj
        this.PopupWord = true
      },
      Wordhide: function () {
        this.isfooer = true
        if (this.isplay) {
          this.$refs.PalyFooter.isPlay()
          this.isplay = false
        }
        if (this.bgcolor.Y !== -1) {
          this.$refs.Lyrics[this.bgcolor.Y - 1].$refs.Lyric[this.bgcolor.X].style.backgroundColor = ''
        }
        this.PopupWord = false
      },
      HandoutShow: function () {
        this.isfooer = false
        this.Handouthide()
        // if(this.isRecord){
        //   this.isplay = this.$refs.PalyFooter.ispay
        //   this.isRecord = false
        // }
        this.isplay = this.$refs.PalyFooter.ispay
        if (this.$refs.PalyFooter.ispay) {
          this.$refs.PalyFooter.isPlay()
        }
        this.PopupHandout = true
      },
      Handouthide: function () {
        this.isfooer = true
        this.isRecord = true
        if (this.isplay) {
          this.$refs.PalyFooter.isPlay()
        }
        this.PopupHandout = false
      },
      Modifyshow: function () {
        this.isfooer = false
        this.PopupModify = true
      },
      Modifyhide: function () {
        this.isfooer = true
        this.PopupModify = false
      },
      SpeedShow: function () {
        this.isfooer = false
        this.PopupSpeed = true
      },
      Speedhide: function () {
        this.isfooer = true
        this.PopupSpeed = false
      },
      Speed: function (str) {
        this.$refs.PalyFooter.Speed(str)
      },
      lrBox: function (Time) {
        this.Chapter.forEach(function (item, index) {
          if (item.time.indexOf(Time.substr(0, 6)) === 0) {
            this.curLrcIndex = index
            var lrBox = this.$refs.lrcBox.childNodes
            // var offsetHeight = lrBox[index].offsetHeight
            // var body = document.body.clientHeight
            this.translateY = lrBox[index].offsetTop - 50
            if (this.isTouch) {
              $('html,body').animate({
                scrollTop: this.translateY
              }, 1000)
              // document.getElementById('play').scrollTop = this.translateY
            }
          }
        }.bind(this))
      },
      Click: function (obj) {
        this.isfooer = true
        this.Wordhide()
        if (obj.Time === '') {
          return
        }
        var Time = obj.Time.split(':')
        if (parseInt(Time[0]) === 0) {
          this.$refs.PalyFooter.$refs.audio.currentTime = parseInt(Time[1])
        } else {
          this.$refs.PalyFooter.$refs.audio.currentTime = (parseInt(Time[0]) * 60) + parseInt(Time[1])
        }
        this.$refs.PalyFooter.$refs.audio.play()
        var lrBox = this.$refs.lrcBox.childNodes
        $('html,body').animate({
          scrollTop: lrBox[obj.i].offsetTop - 50
        }, 500)
        // this.lrBox(obj.Time)
      },
      PageStart: function (e) {
        clearTimeout(this.Timeout)
        this.$Mate.PageStart(e)
        this.isTouch = false
        this.Wordhide()
      },
      PageMove: function (e) {
        clearTimeout(this.Timeout)
        this.isTouch = false
        this.$Mate.PageMove(e, res => {
          if (res.direction === 'y') {
            this.isfooer = res.is
          }
          // if (res.direction === 'x' && res.is) {
          //   this.go('/Handouts')
          // }
        })
      },
      PageEnd: function (e) {
        var _this = this
        this.Timeout = setTimeout(() => {
          _this.isTouch = true
        }, 3000)
      },
      OptiveColor: function (obj) {
        this.TenColorStyle = obj
        if (this.isBtns) {
          this.btStyle = {
            width: '80%',
            height: '4rem',
            borderRadius: '5rem',
            color: obj.mode === 1 ? '#fff' : '#333',
            backgroundColor: obj.mode === 1 ? '#2eb9ff' : '#fff',
            boxShadow: obj.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
          }
        }
        localStorage.setItem('TenColorStyle', JSON.stringify(obj))
      },
      OptiveTenFontSizi: function (obj) {
        this.TenFontSizi = obj
        localStorage.setItem('TenFontSizi', JSON.stringify(obj))
        // this.$refs.Lyrics.forEach(item => {
        //   item.option.fontSize = obj.fontSize
        // })
      },
      Popuphide: function () {
        this.Popup = false
      },
      PopupShow: function () {
        this.Popup = true
      },
      SetTime: function (S) {
        var _this = this
        if (S === 0) {
          _this.btStyle = {
            width: '70%',
            height: '4.5rem',
            borderRadius: '5rem',
            color: _this.TenColorStyle.mode === 1 ? '#fff' : '#333',
            backgroundColor: _this.TenColorStyle.mode === 1 ? '#2eb9ff' : '#fff',
            boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
          }
          _this.isBtns = true
          _this.btntext = '立即答题'
        } else {
          // var Tisen = setInterval(() => {
          //   S -= 1000
          //   if (S === 0) {
          //     _this.btStyle = {
          //       width: '70%',
          //       height: '4.5rem',
          //       borderRadius: '5rem',
          //       color: _this.TenColorStyle.mode === 1 ? '#fff' : '#333',
          //       backgroundColor: _this.TenColorStyle.mode === 1 ? '#2eb9ff' : '#fff',
          //       boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
          //     }
          //     _this.isBtns = true
          //     _this.btntext = '立即答题'
          //     clearInterval(Tisen)
          //   } else {
          //     _this.isBtns = false
          //     var time = S
          //     var Minu = new Date(time).getMinutes() < 10 ? '0' + new Date(time).getMinutes() : new Date(time).getMinutes()
          //     var Ses = new Date(time).getSeconds() < 10 ? '0' + new Date(time).getSeconds() : new Date(time).getSeconds()
          //     _this.btStyle = {
          //       width: '70%',
          //       height: '4.5rem',
          //       borderRadius: '5rem',
          //       color: _this.TenColorStyle.mode === 1 ? '#333' : '#fff',
          //       backgroundColor: _this.TenColorStyle.mode === 1 ? '#f2f2f2' : 'rgba(255,255,255,.2)',
          //       // boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
          //     }
          //     _this.btntext = '立即答题（' + Minu + ':' + Ses + '）'
          //     // S = S
          //   }
          // }, 1000)

          var timer=null
          var t=S
          var m=0
          var s=0
          m=Math.floor(t/60%60)
          m<10&&(m='0'+m)
          s=Math.floor(t%60)
          function countDown(){
            s--
            _this.$Mate.setCookie('vip'+_this.items.chapter_id,t--,24)
            s<10&&(s='0'+s)
            if(s.length>=3){
              s=59
              m="0"+(Number(m)-1)
            }
            if(m.length>=3){
              m='00'
              s='00'
              _this.btStyle = {
                width: '70%',
                height: '4.5rem',
                borderRadius: '5rem',
                color: _this.TenColorStyle.mode === 1 ? '#fff' : '#333',
                backgroundColor: _this.TenColorStyle.mode === 1 ? '#2eb9ff' : '#fff',
                boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
              }
              _this.isBtns = true
              _this.btntext = '立即答题'
              clearInterval(timer)
              return;
            }
            _this.isBtns = false
            _this.btStyle = {
              width: '70%',
              height: '4.5rem',
              borderRadius: '5rem',
              color: _this.TenColorStyle.mode === 1 ? '#333' : '#fff',
              backgroundColor: _this.TenColorStyle.mode === 1 ? '#f2f2f2' : 'rgba(255,255,255,.2)',
              // boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
            }
            _this.btntext = '立即答题（' + m + ':' + s + '）'
          }
          timer=setInterval(countDown,1000)

        }
      },
      // SetTime: function (S) {
      //   var _this = this
      //   if (S === 0) {
      //     _this.btStyle = {
      //       width: '70%',
      //       height: '4.5rem',
      //       borderRadius: '5rem',
      //       color: _this.TenColorStyle.mode === 1 ? '#fff' : '#333',
      //       backgroundColor: _this.TenColorStyle.mode === 1 ? '#2eb9ff' : '#fff',
      //       boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
      //     }
      //     _this.isBtns = true
      //     _this.btntext = '立即答题'
      //   } else {
      //     var Tisen = setInterval(() => {
      //       S -= 1000
      //       if (S === 0) {
      //         _this.btStyle = {
      //           width: '70%',
      //           height: '4.5rem',
      //           borderRadius: '5rem',
      //           color: _this.TenColorStyle.mode === 1 ? '#fff' : '#333',
      //           backgroundColor: _this.TenColorStyle.mode === 1 ? '#2eb9ff' : '#fff',
      //           boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
      //         }
      //         _this.isBtns = true
      //         _this.btntext = '立即答题'
      //         clearInterval(Tisen)
      //       } else {
      //         _this.isBtns = false
      //         var time = S
      //         var Minu = new Date(time).getMinutes() < 10 ? '0' + new Date(time).getMinutes() : new Date(time).getMinutes()
      //         var Ses = new Date(time).getSeconds() < 10 ? '0' + new Date(time).getSeconds() : new Date(time).getSeconds()
      //         _this.btStyle = {
      //           width: '70%',
      //           height: '4.5rem',
      //           borderRadius: '5rem',
      //           color: _this.TenColorStyle.mode === 1 ? '#333' : '#fff',
      //           backgroundColor: _this.TenColorStyle.mode === 1 ? '#f2f2f2' : 'rgba(255,255,255,.2)',
      //           // boxShadow: _this.TenColorStyle.mode === 1 ? '0 10px 24px 0 rgba(46, 185, 255, 0.4)' : 'none'
      //         }
      //         _this.btntext = '立即答题（' + Minu + ':' + Ses + '）'
      //         // S = S
      //       }
      //     }, 1000)
      //   }
      // },
      goAnswer: function (bull) {
        if (bull) {
          this.$emit('go')
        }
      }
    },
    components: {Lyrics, Hread, PalyFooter, Vocabulary, Handout, Speed, modify, Popup, Button, Word}
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
